<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>Art Vision - Upload</title>
		
		<link rel="stylesheet" type="text/css" href="css/marker.css" />
		<link rel="stylesheet" type="text/css" href="css/marquee.css" />
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> -->
		<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.min.js"></script>
		<script type="text/javascript" src="js/prototype_reduced.js"></script> 
		<script type="text/javascript" src="js/rectmarquee.js"></script>
		<script type="text/javascript" src="js/marquee.js"></script> 
		
	</head>

	<body>
		<h1 class="titulo">
			Creaci&oacute;n de thumbnails
		</h1>
		<div class="info">
			<p class="subtitulo">
				Aqu&iacute; se crear&aacute;n las im&aacute;genes a ser utilizadas tanto en la p&aacute;gina
				principal como en los resultados de b&uacute;squeda. <br />
			</p>
			<p class="ayuda">
				Puede cambiar el tama&ntilde;o de la selecci&oacute;n cliqueando y arrastrando las esquinas. <br />
				Puede mover el &aacute;rea seleccionada cliqueando dentro de la misma y arrastrando <br />
				Cliquee y arrastre fuera del &aacute;rea seleccionada (gris) para realizar una nueva selecci&oacute;n.
			</p>
			<div id="paso1">
				<img style="visibility:hidden" id="icono" class="icono" src="./img/Success2.png" alt="success">
				<span id="mensaje">Realice la selecci&oacute;n para la relaci&oacute;n de aspecto 2:3 y presione</span>
				<button type="button" id="continuar1" onclick="paso1()">Continuar</button>
			</div>
			<!-- <div id="paso2" style="display:none">
				<span>Realice la selecci&oacute;n para la relaci&oacute;n de aspecto 2:3 y presione</span>
				<button type="button" id="continuar2" onclick="paso2()">Continuar</button>
			</div> -->
		</div>
		
		<div id="contenedor"> 
			<img src=<?php echo "upload" . $filename;?> alt="" id="imagen" /> 
		</div>
		<form name="coordsform" action="crop.php"  method="get"> 
			<input type="hidden" name="x" value="0" id="coord_x" /> 
			<input type="hidden" name="y" value="0" id="coord_y" /> 
			<input type="hidden" name="w" value="0" id="coord_w" /> 
			<input type="hidden" name="h" value="0" id="coord_h" />
			
			<input type="hidden" name="x2" value="0" id="coord_x2" /> 
			<input type="hidden" name="y2" value="0" id="coord_y2" /> 
			<input type="hidden" name="w2" value="0" id="coord_w2" /> 
			<input type="hidden" name="h2" value="0" id="coord_h2" />
			
			<input type="hidden" name="nombre" value=<?php echo "upload" . $filename;?> id="nombre_imagen" />
			<table class="coords" border="0" cellpadding="0" cellspacing="0" id="coordinates" width="100%">
			 <tr> 
			 	<td width="20" nowrap="nowrap">&nbsp;<strong>x:</strong></td>
			 	<td width="50">&nbsp;<span id="sample_x">0</span>px</td> 
			 	<td width="20" nowrap="nowrap"><strong>y:</strong></td>
			 	<td width="50">&nbsp;<span id="sample_y">0</span>px</td> 
			 	<td width="20" nowrap="nowrap"><strong>w:</strong></td>
			 	<td width="50">&nbsp;<span id="sample_w">0</span>px</td> 
			 	<td width="20" nowrap="nowrap"><strong>h:</strong></td>
			 	<td width="50">&nbsp;<span id="sample_h">0</span>px</td> 
			 	<td align="right" nowrap="nowrap"><input style="display:none" id="submit" type="submit" value="Post Coordinates" /> &nbsp;</td> 
			 </tr> 
			</table> 
		</form>
	</body>
</html>